<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.departmentId" placeholder="请选择院系">
                            <el-option
                                    v-for="item in departmentOptions"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.majorId" placeholder="请选择专业">
                            <el-option
                                    v-for="item in majorOptions"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-form-item>
                            <el-select clearable size="mini" v-model="formInline.gradeId" placeholder="请选择年级">
                                <el-option
                                        v-for="item in gradeOptions"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.classesId" placeholder="请选择班级">
                            <el-option
                                    v-for="item in classesOptions"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item>
                        <el-input size="mini" v-model="formInline.title" placeholder="请输入试卷名称"></el-input>
                    </el-form-item>-->
                    <el-form-item>
                        <el-select size="mini" v-model="formInline.isPass" placeholder="是否及格">
                            <el-option label="及格" value="1"></el-option>
                            <el-option label="不及格" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select size="mini" v-model="formInline.isExam" placeholder="是否考试">
                            <el-option label="已考" value="1"></el-option>
                            <el-option label="未考" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <!--<el-row style="margin-bottom: 10px">
                    <el-col>
                        <el-button type="primary" size="mini" @click="study">测评</el-button>
                    </el-col>
                </el-row>-->
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        size="mini"
                        tooltip-effect="dark"
                        style="width: 100%; font-size: 12px"
                        border
                >
                    <el-table-column
                            prop="PAPERTITLE"
                            label="试卷名称"
                            header-align="center"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="SUMSCORE"
                            label="总分"
                            header-align="center"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="SCORE"
                            label="得 分"
                            header-align="center"
                            align="center"
                            resizable
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ISPASS"
                            label="是否及格"
                            align="center"
                            show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            {{scope.row.ISPASS ? '及格' : '不及格'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="USERNAME"
                            label="名 称"
                            align="center"
                            show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                            prop="CREATETIME"
                            label="交卷时间"
                            align="center"
                            show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            {{new Date(scope.row.CREATETIME).toLocaleString()}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <viewDialog
                v-if="questionShow"
                :questionShow="questionShow"
                :questionData="questionData"
                :isEdit="true"
                :isShow="false"
                @getDialogStatus="getDialogStatus"
        ></viewDialog>
    </div>
</template>

<script>
    export default {
        name: "evaluation",
        components: {
            viewDialog: resolve => {
                require(["./questionDialog.vue"], resolve);
            }
        },
        data() {
            return{
                questionShow: false,
                formInline: {},
                pagination: {
                    pageSize: 20,
                    total: 1,
                    pageNo: 1
                },
                questionData: {
                    firstPage: true,
                    lastPage: true,
                    pageNumber: 1,
                    pageSize: 10,
                    totalPage: 1,
                    totalRow: 3,
                    list: []
                },
                tableData: [],
                departmentOptions: [],
                majorOptions: [],
                gradeOptions: [],
                classesOptions: []
            }
        },
        created() {
            this.getData(this.pagination.pageSize, this.pagination.pageNo);
            this.$post('/public/findDepartment').then(res => {
                this.departmentOptions = res.data.data;
            });
            this.$post('/public/findMajor').then(res => {
                this.majorOptions = res.data.data;
            });
            this.$post('/public/findEnumGrade').then(res => {
                this.gradeOptions = res.data.data;
            });
            this.$post('/public/findClasses').then(res => {
                this.classesOptions = res.data.data;
            });
        },
        methods: {
            getData(pageSize, pageNo) {
                this.$post('/exam/findExamRecore', {pageSize, pageNo}).then(res => {
                    console.log(res)
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            search() {
                this.$post('/exam/findExamRecore', this.formInline).then(res => {
                    console.log(res)
                    this.tableData = res.data.data.dataList;
                })
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getData(size, this.pagination.pageNo);
            },
            handleCurrentChange(page) {
                this.pagination.pageNo = page;
                this.getData(this.pagination.pageSize, page);
            },
            getDialogStatus() {
                this.questionShow = false;
            },
            study() {
                this.questionShow = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-pagination {
        text-align: right;
        margin-top: 10px;
    }
    .dateStyle {
        /deep/.el-input__inner {
            padding-left: 32px;
        }
    }
</style>
